<template>
  <div>
    <Sub>
      <template #default>
        <h2>home</h2>
        <ul>
          <li v-for="v in arr" :key="v">{{ v }}</li>
        </ul>
      </template>

      <template #header>
        <h1>具名插槽</h1>
      </template>

      <template #footer="{ user, n }">
        <h1>作用域插槽</h1>
        <h1>标题: {{ user.title }}</h1>
        <h1>作者: {{ user.name }}</h1>
        <h1>{{ n }}</h1>
      </template>
    </Sub>
  </div>
</template>

<script setup>
import { ref } from "vue";
import Sub from "./Sub.vue";

const arr = ref([1, 2, 3]);
</script>

<style scoped></style>
